<template>
  <!--  <div style="display: flex; padding-bottom: 24px">
    <div v-for="m in menu.children" style="width: 140px; padding-right: 20px">
      <h3 v-if="m.children && !m.hideChildrenInMenu" :class="route.path.indexOf(m.path) > -1 ? 'menu_active' : 'def_menu'">{{ $t(m.meta.title) }}</h3>

      <div v-if="m.children && !m.hideChildrenInMenu" style="margin-top: 12px; border-block-start: 1px solid rgba(5, 5, 5, 0.19)"></div>

      <template v-if="m.children && !m.hideChildrenInMenu" v-for="submenu in m.children">
        <div class="sub_menu" v-if="!submenu.hidden">
          <router-link :class="route.path.indexOf(submenu.path) > -1 ? 'menu_active' : 'def_menu'" :to="submenu.path">
            <span>{{ $t(submenu.meta.title) }}</span>
          </router-link>
        </div>
      </template>

      <div v-else class="sub_menu" v-if="!m.hidden">
        <router-link :class="route.path.indexOf(m.path) > -1 ? 'menu_active' : 'def_menu'" :to="m.path">
          <span>{{ $t(m.meta.title) }}</span>
        </router-link>
      </div>
    </div>
  </div>-->
  <a-sub-menu v-if="menu.children && !menu.hideChildrenInMenu" :key="menu.path" popupClassName="popupSubMenu">
    <template #icon>
      <SvgIcon :name="menu.meta.icon" v-if="menu.meta.icon" />
    </template>
    <template #title>{{ $t(menu.meta.title) }}</template>
    <template v-if="!menu.hideChildrenInMenu">
      <template v-for="sub in menu.children">
        <!-- 递归组件 -->
        <RenderSubMenu :menu="sub" />
      </template>
    </template>
  </a-sub-menu>
  <!-- renderMenuItem -->
  <a-menu-item :key="menu.path" v-else-if="!menu.meta.hidden">
    <template #icon>
      <SvgIcon :name="menu.meta.icon" v-if="menu.meta.icon" />
    </template>
    <!-- 外部链接 -->
    <a v-if="menu.meta.target" :href="menu.meta.target" :target="menu.meta.blank === false ? '' : '_blank'">
      <!-- span重复了吧?这就是template的弊端,jsx才是王道 -->
      <span>{{ $t(menu.meta.title) }}</span>
    </a>
    <router-link :to="filterParams(menu.path)" v-else>
      <span>{{ $t(menu.meta.title) }}</span>
    </router-link>
  </a-menu-item>
</template>
<script lang="ts" setup name="RenderSubMenu">
import SvgIcon from '@/components/SvgIcon/index.vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const route = router.currentRoute

const props = defineProps(['menu', 'firstRoute'])
// info:todo:貌似没用
if (props.menu.children && props.menu.hideChildrenInMenu) {
  // 把有子菜单的 并且 父菜单是要隐藏子菜单的
  // 都给子菜单增加一个 hidden 属性
  // 用来给刷新页面时， selectedKeys 做控制用
  props.menu.children.forEach((item) => {
    item.meta = Object.assign(item.meta, { hidden: true })
  })
}

// info:todo:目前没有发现需要入口带参数的情况,一般这种跳转的都是二级页面,是从其他页面跳转过来的,不需要显示在菜单中,目前菜单中是这种路径的,点击也会报404,因为没有对:pageNo([1-9]\\d*)?进行翻译,直接当做了路径去匹配,目前做法是去掉后面的参数
const filterParams = (menu) => {
  return menu.indexOf('/:') > 0 ? menu.split('/:')[0] : menu
}
</script>
<style lang="less" scoped>
.menuName {
  svg,
  span {
    vertical-align: middle;
  }

  svg {
    margin-right: 10px;
  }
}

.def_menu {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.88);
}

.sub_menu {
  padding-top: 16px;
}
</style>
